<template>
  <div>
    <Dropdown placement="bottom" :trigger="['click']">
      <Badge>
        <Icon icon="ant-design:star-filled" color="#ffff00" @click.prevent/>
      </Badge>
      <template #overlay>
        <Menu style="max-height: 300px;overflow-y: scroll;">
          <MenuItem v-for="item in projectList" :key="item.projectCode" @click="handleMenuClick(item.projectCode,item.projectName)" >
          <div class="flex items-center">
            <span>{{`（${item.projectCode}）${item.projectName}`}}</span>
          </div>
          </MenuItem>
          <div v-if="!projectList.length" style="padding:10px 25px;">暂无收藏项目！</div>
        </Menu>
      </template>

    </Dropdown>

  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'JeeSiteCollection',
    components: { Icon, Tooltip, Badge, Menu, Dropdown, MenuItem: Menu.Item },
  });
</script>
<script lang="ts" setup>
  import { defineComponent, onMounted, ref, watch } from 'vue';
  import { Tooltip, Badge, Menu, Dropdown } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useRouter } from 'vue-router';
  import { router } from '/@/router';
  import { useGlobSetting } from '/@/hooks/setting';
  import { userCollectListDataNoPage } from '/@/api/proj/info/pmProjectinformation';
  import { pmProjectinformationListData } from '/@/api/proj/info/pmProjectinformation';
  import { switchProject } from '/@/api/zfgsCommon/zfgsCommon';

  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();
  let projectList = ref<any>([])
  async function handleMenuClick( code,name) {
   userStore.setProjecte({code,name})
   let res =  await pmProjectinformationListData({projectno:code})
   await switchProject({ id: res.list[0].id ? res.list[0].id : '' })
    router.push({
      path: '/proj/info/pmProjectinformation/detailsForm',
      query: {
        // projectno: code,
        id: res.list[0].id,
        code:code,
        tabTitle:`项目详情(${code})`
      },
    })
  }

  watch(
    () => userStore.getProjecteList,
    (val, prevVal) => {
      projectList.value = val
    },
    {
      immediate: true,
    },
  );


  onMounted(async () => {
    let res = await userCollectListDataNoPage()
    await userStore.setProjecteList(res)
  });





</script>